<template>
  <div class="editUser">
    <!-- 头部区域 -->
    <itHead class="itHead">
      <span slot="left" class="itHead_left" @click="$router.go(-1)">返回</span>
      <span slot="center">编辑个人资料</span>
      <span slot="right" @click="toIndex">
        <!-- 首页图标 -->
        <van-icon name="wap-home" />
      </span>
    </itHead>
    <!-- 头像区域 -->
    <div class="head">
      <img :src="userInfo.head_img" />
      <!-- 不错不错 -->
      <van-uploader class="van-uploader" :after-read="afterRead" />
    </div>
    <!-- 信息区域 -->

    <!-- 1、用户昵称 -->
    <itCell
      title="昵称"
      :desc="userInfo.nickname"
      @click="nick_show = true"
    ></itCell>
    <van-dialog
      style="padding: 0 30px"
      v-model="nick_show"
      title="修改昵称"
      show-cancel-button
      confirmButtonColor="red"
      @confirm="nick_confirm"
      @cancel="info_cancel"
    >
      <van-field
        v-model="edit_nick"
        placeholder="请输入用户名"
        clearable
        style="margin: 30px 0; border-bottom: 1px solid #ccc"
      />
    </van-dialog>

    <!-- 2、用户密码 -->
    <itCell title="密码" desc="······" @click="pwd_show = true"></itCell>
    <van-dialog
      style="padding: 0 30px"
      v-model="pwd_show"
      title="修改密码"
      show-cancel-button
      confirmButtonColor="red"
      @confirm="pwd_confirm"
      @cancel="info_cancel"
    >
      <!-- 旧密码 -->
      <van-field
        v-model="edit_pwd"
        type="password"
        label="原密码："
        required
        clearable
        placeholder="请输入当前密码"
        style="margin: 30px 0; border-bottom: 1px solid #ccc"
      />
      <!-- 新密码 -->
      <van-field
        v-model="edit_pwd_new1"
        type="password"
        label="新密码："
        required
        clearable
        placeholder="请输入新密码"
        style="margin: 30px 0; border-bottom: 1px solid #ccc"
      />
      <!-- 确认密码 -->
      <van-field
        v-model="edit_pwd_new2"
        type="password"
        label="确认密码："
        required
        clearable
        placeholder="请输入确认密码"
        style="margin: 30px 0; border-bottom: 1px solid #ccc"
      />
    </van-dialog>

    <!-- 3、用户性别 -->
    <itCell
      title="性别"
      :desc="userInfo.gender"
      @click="gender_show = true"
    ></itCell>

    <van-popup
      v-model="gender_show"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-picker title="性别" show-toolbar :columns="gender_columns" />
      <!-- @confirm="onConfirm" @cancel="onCancel" @change="onChange" -->
    </van-popup>

    <!-- <van-dialog
      style="padding: 0 30px"
      v-model="gender_show"
      title="性别选择"
      show-cancel-button
      confirmButtonColor="red"
      @confirm="gender_confirm"
      @cancel="info_cancel"
    > -->
    <!-- ____内容区____ -->
    <!-- </van-dialog> -->
  </div>
</template>

<script>
// 自定义：头部组件
import itHead from "@/components/itHead.vue";
// 自定义组件：单元格
import itCell from "@/components/itCell.vue";
// 引入apis中user.js中的axios功能
import { userInfo, editUser } from "@/apis/user.js";
// 引入apis中upload功能
import upload from "@/apis/upload.js";
// 导入axios
import axios from "@/utils/myAxios.js";

export default {
  data() {
    return {
      //  用户信息 (包含密码)
      userInfo: "",

      // 控制弹出框
      nick_show: false,
      pwd_show: false,
      gender_show: false,

      // 修改d 数据
      edit_nick: "", // 修改昵称
      edit_pwd: "", // 原密码
      edit_pwd_new1: "", // 新密码
      edit_pwd_new2: "", // 确认密码

      edit_gender: "", // 修改性别
      // 选择框内容
      gender_columns: ["男", "女"],
    };
  },
  // 注册组件
  components: {
    itHead,
    itCell,
  },
  //   方法集合
  methods: {
    //   方法：修改头像
    async afterRead(file) {
      // console.log(file);
      // console.log(file.file);

      // 将选择的文件上传到服务器
      let formdata = new FormData();
      formdata.append("file", file.file);

      let res = await upload(formdata);
      // console.log(res);
      if (res.status == 200 && res.data.message == "文件上传成功") {
        //   this.$toast.success(res.data.message);
        // 实现用户的头像更新
        let res1 = await editUser(this.userInfo.id, {
          head_img: res.data.data.url,
        });
        //   console.log(res1);
        //   if (res.status == 200 && res.data.message == "修改成功") {
        this.userInfo.head_img = axios.defaults.baseURL + res.data.data.url;
        //   }
      } else {
        this.$toast.fail(res.data.message);
      }

      // let res = await editUser(this.userInfo.id, formdata);
      // console.log(res);
      // if (res.status == 200 && res.data.message == '修改成功') {
      //    console.log();
      // }
    },
    //  方法：修改昵称
    async nick_confirm() {
      let res = await editUser(this.userInfo.id, { nickname: this.edit_nick });
      // console.log(res);
      if (res.status == 200 && res.data.message == "修改成功") {
        this.userInfo.nickname = res.data.data.nickname;
        this.$toast.success(res.data.message);
      } else {
        this.$toast.fail(res.data.message);
      }
    },
    //  方法：修改密码
    async pwd_confirm() {
      //  如果输入的原密码正确：
      if (this.edit_pwd === this.userInfo.password) {
        // 如果新密码符合格式：
        if (/^\w{3,16}$/.test(this.edit_pwd_new1)) {
          //   如果确认密码和新密码一致：
          if (this.edit_pwd_new1 === this.edit_pwd_new2) {
            // Start 更新密码
            let res = await editUser(this.userInfo.id, {
              password: this.edit_pwd_new1,
            });
            console.log(res);
            if (res.status == 200 && res.data.message == "修改成功") {
              // 修改成功的话,将新密码赋给用户数据的password
              this.userInfo.password = this.edit_pwd_new1;
              //   恭喜用户
              this.$toast.success(res.data.message);
              //   并将密码框清空
              this.edit_pwd = "";
              this.edit_pwd_new1 = "";
              this.edit_pwd_new2 = "";
              //   为了方式改密码后忘记, 我将最新密码保存在浏览器本地
              localStorage.setItem("allNew_pwd", this.userInfo.password);
            } else {
              this.$toast.fail(res.data.message);
            }
            // End 更新密码
          } else {
            this.$toast.fail("确认密码不一致");
          }
        } else {
          this.$toast.fail("新密码格式错误");
        }
      } else {
        this.$toast.fail("原密码错误");
      }
    },
    // 方法：修改性别
    async gender_confirm() {
      console.log("还可以哦");
    },
    //  修改信息_取消按钮
    info_cancel() {
      this.edit_nick = this.userInfo.nickname;
      this.edit_pwd = "";
      this.edit_pwd_new1 = "";
      this.edit_pwd_new2 = "";
      this.edit_gender = this.userInfo.gender;
    },
    toIndex () {
       this.$router.push({path: '/index'});
    }
  },
  async mounted() {
    //   获取用户信息
    let userId = this.$route.params.id;
    let res = await userInfo(userId);
    //  console.log(res);
    if (res.status == 200) {
      //  将性别的 0和1 改成 男和女
      res.data.data.gender =
        res.data.data.gender == 1
          ? "男"
          : res.data.data.gender == 0
          ? "女"
          : "不详";
      //  将浏览器本地保存的密码赋给 用户数据新增d密码属性
      res.data.data.password = JSON.parse(localStorage.getItem("userInfo_pwd"));
      // 给获取到的用户数据的图片加上基础地址
      res.data.data.head_img = axios.defaults.baseURL + res.data.data.head_img;
      // 把用户数据赋给this.userInfo
      this.userInfo = res.data.data;

      // 修改用户数据的变量
      this.edit_nick = this.userInfo.nickname;
      this.edit_pwd = "";
      this.edit_gender = this.userInfo.gender;
    } else {
      console.log("好像没获取成功哦，👇👇");
      console.log(res);
    }
  },
};
</script>

// 样式：
<style lang="less" scoped>
.itHead {
  padding-top: 10px;
}

.head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  position: relative;

  img {
    display: block;
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    border-radius: 50%;
  }
  .van-uploader {
    position: absolute;
    background-color: red;
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
  }
  /deep/.van-uploader__upload {
    width: 100 / 360 * 100vw;
    height: 100 / 360 * 100vw;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>